<template>
  <div style="width: 100vw;height: 80px;background-color:transparent;position: fixed;bottom: 0;">
    <el-row style="width: 100%;" justify="center">
      <el-col :span="16">
        <div style="width: 100%;height: 80px;background-color:#fff;">
          <el-row align="middle" justify="space-between" style="height: 100%;padding: 0 15px;">
            <el-col :span="8">
              <el-row justify="space-between" align="middle">
                <el-image style="width: 50px; height: 50px;border-radius: 4px;"
                          src="https://cdn-bdy-static.shanhutech.cn/bizhi/staticwp/202406/7f75afacf7212e8a8450a2bd53b508ab--2281979337.jpg"
                          fit="cover" />
              </el-row>
            </el-col>
            <el-col :span="8">
              <!--<el-slider v-model="value1" />-->
              <!--              <audio controls ref="audio">-->
              <!--                <source src="@/assets/music.m4a" type="audio/mpeg" />-->
              <!--              </audio>-->
              <audio-player :audioUrl="music" :isPauseTtsAudio="true"></audio-player>

            </el-col>
            <el-col :span="8"></el-col>
          </el-row>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import AudioPlayer from '@/components/AudioPlayer.vue'
import music from '@/assets/music.m4a'

</script>

<style scoped>
.text-overflow {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}

.bgg {
  background: linear-gradient(to right, var(--el-color-primary) 0%, #8ee7ff 100%);
}

</style>